<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>节目详情</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app-page">
    <div class="app-page-header">
        <div class="page-title">节目详情</div>
    </div>
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <form class="filter">
                    <div class="filter-item">
                        <div class="form-item">
                            <input type="text" placeholder="请输入机器码进行模糊查询" name="keyword" id="searchKeyWords">
                        </div>
                        <input type="button" class="z-btn z-mal z-primary" onclick="renderData();" value="查询">
                    </div>
                </form>

                <table class="z-table">
                    <thead>
                    <th>在线状态</th>
                    <th>机器码</th>
                    <th>MAC</th>
                    <th>当前播放JSON</th>
                    <th>当前下载JSON</th>
                    <th>下载状态</th>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
            <div class="app-card-body">
                <!-- 前端分页 -->
                <div class="pagination z-pat z-fr"></div>
            </div>
        </div>
    </div>
    
    <!-- 错误提示 -->
    <div class="popup-update popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg" data-popup-close></div>
        <div class="body">
            <div class="title">失败原因</div>
            <div class="content" id="failTips">
            </div>
        </div>
    </div>
</div>


<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content");
    var pageNum;//记录分页-页码
    var pageSize;//记录分页-每页条数
    var total; //记录总的记录数
    // 分页插件初始化
    var pagination = new Pagination(".pagination", {
        pageIndex: 1,
        pageSize: 20,
        count: 0,
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            pageNum = pageIndex;// 当前点击的页码数记录下来。以便调用后台查询接口时传入正确的分页参数
            renderData();
        }
    })

    // 页面加载完毕 首次查询数据
    renderData();
	
    function renderData() {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: context + '/programInfo/getProgramInfo',
            data: {
                version: [[${version}]],
                deviceNum: $("#searchKeyWords").val(),
                pageNum: pageNum,
                pageSize: pageSize
            },
            cache: false,
            async: false,
            success: function (data) {
                if (data.code == 0) {
                    appendRecord(data.data.record);

                    // 分页渲染
                    pagination.options.count = data.data.total;
                    console.log('pageIndex:' + data.data.pageNum + "<>" + "total:" + data.data.total);
                    pagination.render();
                } else {
                    alert(data.msg);
                }
            }
        });
    }

    function appendRecord(record) {
        var html = "";
        for (var i = 0; i < record.length; i++) {
            var r = record[i];
            html += "<tr>     ";
            var deviceStatus = '';
            if (  r.deviceStatus == null  ) {
            	deviceStatus = '未知'	;
            }else if (r.deviceStatus == 0){
            	deviceStatus = '在线';
            }else {
            	deviceStatus = '离线';
            }
            html += "	<td>" + deviceStatus + "</td>   ";
            html += "	<td>" + (r.machineNum==null?'无':r.machineNum) + "</td>   ";
            html += "	<td>" + (r.deviceMac==null?'无':r.deviceMac) + "</td>     ";
            html += "	<td>" + (r.playJson==null?'无':r.playJson) + "</td>    ";
            html += "	<td>" + (r.downloadJson==null?'无':r.downloadJson) + "</td>        ";
            if (r.downloadState == null && r.deviceMac==null ) {
            	html += "	<td style='color:red' onclick='openTips(\"该终端不存在\")'><u>失败</u></td>  "; 
            } else if (r.downloadState == 1) {
                html += "	<td>完成</td>        ";
            } else if (r.downloadState == 0 || r.downloadState == null) {
                html += "	<td>下载中</td> ";
            } else {
                html += "	<td style='color:red' onclick='openTips("+r.failureReason+")'><u>失败</u></td>  ";
            }
            html += "</tr>      ";
        }
        $("#tbody").empty();
        $("#tbody").append(html);
    }
    
    function openTips(content){
    	// 打开弹窗
    	$("#failTips").html(content);
        popup.open(".popup-update");
    }
    

</script>
</body>

</html>